<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>每日推荐 - 中华对联</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#C41E3A', // 中国红
                        secondary: '#D4AF37', // 金色
                        accent: '#8B4513', // 棕色
                        light: '#F9F5F1', // 米色背景
                        dark: '#2D2327' // 深色文字
                    },
                    fontFamily: {
                        song: ['"Noto Serif SC"', 'serif'],
                        kai: ['"Noto Serif SC"', 'serif']
                    }
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-pattern {
                background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23c41e3a' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
            }
        }
    </style>
    
    <!-- 导入字体 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>

<body class="bg-light bg-pattern text-dark min-h-screen font-song pb-20">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-primary text-white shadow-md transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex items-center">
            <a href="index.html" class="mr-4">
                <i class="fa fa-arrow-left text-lg"></i>
            </a>
            <h1 class="text-[clamp(1.25rem,5vw,1.75rem)] font-kai font-bold tracking-wider">
                每日推荐
            </h1>
        </div>
    </header>

    <main class="container mx-auto px-4 py-6">
        <!-- 推荐对联列表 -->
        <div id="recommended-couplets" class="space-y-4">
            <!-- 对联内容将通过JavaScript动态填充 -->
        </div>
        
        <!-- 加载更多按钮 -->
        <div class="flex justify-center mt-8 mb-4">
            <button id="load-more" class="px-6 py-2 bg-white text-primary border border-primary rounded-full text-sm hover:bg-primary/5 transition-colors flex items-center">
                <i class="fa fa-spinner fa-spin mr-2" style="display: none;"></i>
                加载更多
            </button>
        </div>
    </main>

    <!-- 底部导航 -->
    <footer class="fixed bottom-0 left-0 right-0 bg-white shadow-[0_-1px_3px_rgba(0,0,0,0.1)] py-2 z-40">
        <div class="container mx-auto">
            <div class="flex justify-around">
                <a href="index.html" class="flex flex-col items-center text-primary">
                    <i class="fa fa-home text-lg"></i>
                    <span class="text-xs mt-1">首页</span>
                </a>
                <a href="create.html" class="flex flex-col items-center text-gray-400 hover:text-primary transition-colors">
                    <i class="fa fa-pencil text-lg"></i>
                    <span class="text-xs mt-1">创作</span>
                </a>
                <a href="profile.html" class="flex flex-col items-center text-gray-400 hover:text-primary transition-colors">
                    <i class="fa fa-user text-lg"></i>
                    <span class="text-xs mt-1">我的</span>
                </a>
            </div>
        </div>
    </footer>

    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            if (window.scrollY > 10) {
                header.classList.add('py-2');
                header.classList.remove('py-3');
            } else {
                header.classList.add('py-3');
                header.classList.remove('py-2');
            }
        });
        
        // 推荐对联数据
        const recommendedData = [
            {
                id: 1,
                上联: '海纳百川，有容乃大',
                下联: '壁立千仞，无欲则刚',
                标签: '哲理联',
                点赞数: 328,
                收藏数: 142
            },
            {
                id: 2,
                上联: '风声雨声读书声，声声入耳',
                下联: '家事国事天下事，事事关心',
                标签: '名联',
                点赞数: 286,
                收藏数: 125
            },
            {
                id: 3,
                上联: '青山不墨千秋画',
                下联: '绿水无弦万古琴',
                标签: '风景联',
                点赞数: 254,
                收藏数: 108
            },
            {
                id: 4,
                上联: '宝剑锋从磨砺出',
                下联: '梅花香自苦寒来',
                标签: '励志联',
                点赞数: 232,
                收藏数: 96
            },
            {
                id: 5,
                上联: '读书破万卷',
                下联: '下笔如有神',
                标签: '学习联',
                点赞数: 215,
                收藏数: 87
            },
            {
                id: 6,
                上联: '松竹梅岁寒三友',
                下联: '桃李杏春风一家',
                标签: '春联',
                点赞数: 198,
                收藏数: 76
            },
            {
                id: 7,
                上联: '删繁就简三秋树',
                下联: '领异标新二月花',
                标签: '哲理联',
                点赞数: 186,
                收藏数: 69
            },
            {
                id: 8,
                上联: '大肚能容，容天下难容之事',
                下联: '开口便笑，笑世间可笑之人',
                标签: '佛联',
                点赞数: 174,
                收藏数: 62
            }
        ];
        
        // 已加载的数量
        let loadedCount = 0;
        // 每次加载的数量
        const batchSize = 4;
        
        // 渲染推荐对联列表
        function renderRecommendedCouplets(startIndex, count) {
            const container = document.getElementById('recommended-couplets');
            
            // 获取要加载的数据
            const batchData = recommendedData.slice(startIndex, startIndex + count);
            
            // 遍历数据，创建对联元素
            batchData.forEach(couplet => {
                const coupletElement = document.createElement('div');
                coupletElement.className = 'bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow';
                coupletElement.innerHTML = `
                    <div class="p-4">
                        <div class="font-kai text-center py-3">
                            <p class="text-[clamp(1.1rem,4vw,1.4rem)] mb-3 leading-relaxed">${couplet.上联}</p>
                            <p class="text-[clamp(1.1rem,4vw,1.4rem)] leading-relaxed border-t border-gray-100 pt-3">${couplet.下联}</p>
                        </div>
                        <div class="flex justify-between items-center mt-4 pt-3 border-t border-gray-100">
                            <span class="text-xs bg-secondary/10 text-accent px-2 py-1 rounded-full">${couplet.标签}</span>
                            <div class="flex space-x-4">
                                <button class="text-gray-400 hover:text-primary transition-colors flex items-center text-sm">
                                    <i class="fa fa-thumbs-up mr-1"></i> ${couplet.点赞数}
                                </button>
                                <button class="text-gray-400 hover:text-primary transition-colors flex items-center text-sm">
                                    <i class="fa fa-bookmark-o mr-1"></i> 收藏
                                </button>
                            </div>
                        </div>
                    </div>
                `;
                
                // 添加到容器中，并添加淡入动画
                coupletElement.classList.add('opacity-0', 'transform', 'translate-y-2', 'transition-all', 'duration-500');
                container.appendChild(coupletElement);
                
                // 触发动画
                setTimeout(() => {
                    coupletElement.classList.remove('opacity-0', 'transform', 'translate-y-2');
                }, 10);
            });
            
            // 更新已加载数量
            loadedCount += batchData.length;
            
            // 重新注册收藏按钮事件
            registerBookmarkEvents();
            // 重新注册喜欢按钮事件
            registerLikeEvents();
            
            // 检查是否还有更多数据
            if (loadedCount >= recommendedData.length) {
                document.getElementById('load-more').innerHTML = '没有更多了';
                document.getElementById('load-more').disabled = true;
                document.getElementById('load-more').classList.add('opacity-50');
            }
        }
        
        // 注册收藏按钮事件
        function registerBookmarkEvents() {
            document.querySelectorAll('button:has(.fa-bookmark-o)').forEach(button => {
                button.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    if (icon.classList.contains('fa-bookmark-o')) {
                        icon.classList.remove('fa-bookmark-o');
                        icon.classList.add('fa-bookmark');
                        this.classList.remove('text-gray-400');
                        this.classList.add('text-primary');
                    } else {
                        icon.classList.remove('fa-bookmark');
                        icon.classList.add('fa-bookmark-o');
                        this.classList.remove('text-primary');
                        this.classList.add('text-gray-400');
                    }
                });
            });
        }
        
        // 注册喜欢按钮事件
        function registerLikeEvents() {
            document.querySelectorAll('button:has(.fa-thumbs-up)').forEach(button => {
                button.addEventListener('click', function() {
                    const likeCount = this.textContent.trim().match(/\d+/);
                    if (likeCount) {
                        const count = parseInt(likeCount[0]);
                        if (this.classList.contains('text-gray-400')) {
                            this.textContent = ' ' + (count + 1);
                            this.classList.remove('text-gray-400');
                            this.classList.add('text-primary');
                        } else {
                            this.textContent = ' ' + (count - 1);
                            this.classList.remove('text-primary');
                            this.classList.add('text-gray-400');
                        }
                        // 重新添加图标
                        this.prepend(document.createElement('i')).className = 'fa fa-thumbs-up mr-1';
                    }
                });
            });
        }
        
        // 加载更多按钮事件
        document.getElementById('load-more').addEventListener('click', function() {
            const spinner = this.querySelector('i');
            spinner.style.display = 'inline-block';
            this.disabled = true;
            
            // 模拟加载延迟
            setTimeout(() => {
                renderRecommendedCouplets(loadedCount, batchSize);
                spinner.style.display = 'none';
                this.disabled = loadedCount >= recommendedData.length;
            }, 800);
        });
        
        // 页面加载完成后初始化
        window.addEventListener('load', function() {
            // 初始加载前几副对联
            renderRecommendedCouplets(0, batchSize);
        });
    </script>
</body>
</html>